<template>        
    <Modal v-model="modal" title="已绑定的物料" fullscreen>
      <Table
        :height="options.tableHeight"
        stripe
        :columns="columns"
        :data="data"
        no-data-text="亲，没有找到相关记录哦！~"></Table>
      <div slot="footer">
        <Button size="large" @click="modal=false">取消</Button>
      </div>
      <Loader :status="status" @refresh="getData"></Loader>
    </Modal>
</template>

<script>
export default {
  data() {
    return {
      modal: false,
      centerProductId: null,
      status: 'pass',
      options: {
        tableHeight: 300
      },
      columns: [{
        title: '物料ID',
        align: 'left',
        key: 'materialId',
        minWidth: 100
      }, {
        title: '物料编号',
        align: 'left',
        key: 'materialSn',
        minWidth: 100
      }, {
        title: '物料名称',
        align: 'left',
        key: 'materialName',
        minWidth: 100
      }, {
        title: '操作',
        align: 'left',
        minWidth: 80,
        render: (h, params) => {
          return h('div', [
            h('Button', {
              props: {
                size: 'small',
                type: 'primary'
              },
              on: {
                click: () => {
                  this.onUnBind(params.row.materialId)
                }
              }
            }, '解绑')
          ])
        }
      }],
      data: []
    }
  },
  methods: {
    updateForm(centerProductId) {
      this.initTable()
      this.modal = false
      this.openModal()
      this.centerProductId = centerProductId
      this.getData()
    },
    getData() {
      this.status = 'loading'
      this.openModal()
      this.$ajaxGet(`/product/business/find_erp_materiel/${this.centerProductId}`).then(data => {
        this.status = 'pass'
        this.data = data || []
      }).catch(() => {
        this.status = 'error'
      })
		},
    openModal() {
      this.modal = true;
    },
    closeModal() {
      this.modal = false;
    },
    onUnBind(materialId) {
      if (this.status === 'loading') return
      this.$Modal.confirm({
        title: '解绑',
        content: '确定要解绑吗？',
        onOk: () => {
          this.status = 'loading'
          this.$jsonPost('/product/erp_materiel/unBinding', [materialId]).then(() => {
            this.status = 'pass'
            this.$Notice.success({
              title: '解绑成功'
            })
            this.closeModal()
            this.$emit('update')
          }).catch(() => {
            this.status = 'pass'
          })
        }
      })
    },
    initTable(translate = 0) {
      this.setTableSize(translate)
      window.addEventListener('resize', () => {
        this.tableTimer && clearTimeout(this.tableTimer)
        this.tableTimer = setTimeout(() => this.setTableSize(translate), 100)
      })
    },
    setTableSize(translate = 0) {
      let target = document.documentElement.clientHeight || document.body.clientHeight
      if (!target) return
      let height = target - 170 - translate
      this.options.tableHeight = height
    }
  }
};
</script>
